<template>
  <section id="pagination">
    <view class="total">共{{ total }}条</view>
    <view class="selectCard">
      <uni-data-select
        placement="top"
        v-model="pageNumber"
        :localdata="range"
        @change="numberChange"
        :clear="false"
      ></uni-data-select>
    </view>
    <view class="numberCard">
      <!-- 左箭头 -->
      <uni-icons
        type="left"
        size="14"
        @click="pageChange(pageSelect - 1)"
      ></uni-icons>
      <!-- 固定第一页 -->
      <view
        :class="pageSelect == 1 ? 'numberIcons numberHover' : 'numberIcons'"
        @click="pageChange(1)"
      >
        1
      </view>
      <!-- 左侧更多 -->
      <view
        class="numberIcons"
        v-show="pageCount > 9 && pageSelect > 5"
        @click="pageChange(pageSelect - 5)"
      >
        ...
      </view>
      <!-- 中间显示的页码，通过pageNumberAry数组控制显示的数据 -->
      <view
        v-for="index in pageNumberAry"
        :key="index"
        @click="pageChange(index)"
        :class="pageSelect == index ? 'numberIcons numberHover' : 'numberIcons'"
      >
        {{ index }}
      </view>
      <!-- 右侧更多 -->
      <view
        class="numberIcons"
        v-show="pageCount > 9 && pageSelect < pageCount - 4"
        @click="pageChange(pageSelect + 5)"
      >
        ...
      </view>
      <!-- 固定最后一页 -->
      <view
        v-if="pageCount > 1"
        :class="
          pageSelect == pageCount ? 'numberIcons numberHover' : 'numberIcons'
        "
        @click="pageChange(pageCount)"
      >
        {{ pageCount }}
      </view>
      <!-- 右箭头 -->
      <uni-icons
        type="right"
        size="14"
        @click="pageChange(pageSelect + 1)"
      ></uni-icons>
    </view>
    <view class="goNumber">
      前往<input
        class="inputGo"
        type="number"
        :value="input"
        @confirm="inputChange"
      />页
    </view>
  </section>
</template>

<script setup lang="ts">
const emit = defineEmits(["event-change"]);
let props: any = defineProps({
  total: {
    type: Number,
    default: 100,
  },
  setPage: {
    type: Object,
    default: {},
  },
  range: {
    type: Array,
    default: () => [
      { value: 10, text: "10条/页" },
      { value: 20, text: "20条/页" },
      { value: 50, text: "50条/页" },
    ],
  },
});

watch(
  () => props.setPage.state,
  () => {
    if (!props.setPage.num) return;
    pageChange(props.setPage.num, "external");
  }
); // 外部传入页码时处理

let pageNumber = ref(props.range[0].value || 10); // 每页显示条数
// let range = [
//   { value: 10, text: "10条/页" },
//   { value: 20, text: "20条/页" },
//   { value: 50, text: "50条/页" },
// ]; // 下拉框数据集

let pageCount = computed(() => {
  if (props.total == 0) return 1;
  return Math.ceil(props.total / pageNumber.value);
}); // 计算总页数

let pageSelect = ref(1); // 当前选中页数

const pageNumberAry = computed(() => {
  if (pageCount.value <= 9) {
    // 当总页数小于等于10页时全部显示
    return Array.from(
      { length: pageCount.value },
      (_, index) => index + 1
    ).slice(1, pageCount.value - 1);
  } else {
    if (pageSelect.value - 4 > 1 && pageSelect.value + 4 < pageCount.value) {
      // 当选中页数处于中间时输出的数组
      return Array.from(
        { length: 5 },
        (_, index) => pageSelect.value - 2 + index
      );
    } else if (pageSelect.value - 4 > 1) {
      // 当选中页数处于后边时，显示的数组（连续到最后一个页码）
      return Array.from(
        { length: 6 },
        (_, index) => pageCount.value - 6 + index
      );
    } else {
      // 当选中页数处于前边时，显示的数组（从第一个页码开始）
      return Array.from({ length: 6 }, (_, index) => 2 + index);
    }
  }
}); // 除第一页和最后一页外显示的页码集合

let oldPageNumber = 10; // 存储旧的pageNumber值
const numberChange = (e: any) => {
  if (e === oldPageNumber) {
    return;
  } // 重复选项不处理
  oldPageNumber = e;
  pageChange(1, "numberChange");
}; // 条/页change时触发

const pageChange = (index: number, mode?: string) => {
  if (index < 1 || index > pageCount.value) return;
  if (mode === "external") {
    pageSelect.value = index;
    goChange();
    return;
  } // 外部修改页码值时直接调用向外传送数据的方法
  if (index === pageSelect.value && mode != "numberChange") return; // 页码重复点击并且非切换pageNumber时不处理
  pageSelect.value = index;
  goChange();
}; // 切换页码时触发

let input = 1; // 输入框默认值
const inputChange = (e: any) => {
  pageChange(Number(e.detail.value));
}; // 输入页码时触发

const goChange = () => {
  let dataPage = {
    pageNum: pageSelect.value,
    pageSize: pageNumber.value,
  };
  emit("event-change", dataPage);
}; // 切换页码时向父组件传递信息
</script>

<style lang="scss" scoped>
#pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 36px;
  margin: 0 auto;
  font-size: 14px;
  color: rgb(96, 98, 102);
  user-select: none;

  .selectCard {
    width: 115px;
    height: 30px;
    margin: 0 16px;
    // border: 1px solid rgb(228, 228, 228);
  }

  .numberCard {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .numberIcons {
      line-height: 32px;
      text-align: center;
      min-width: 32px;
      height: 32px;
    }

    .numberHover {
      color: rgb(0, 185, 131);
      font-weight: 700;
    }
  }

  .goNumber {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 18px;

    .inputGo {
      width: 56px;
      height: 30px;
      margin: 0 8px;
      text-align: center;
      border: 1px solid rgb(228, 228, 228);
      font-size: 14px;
      border-radius: 2px;
      color: rgb(96, 98, 102);
    }
  }
}

::v-deep.uni-select__input-text {
  color: rgb(96, 98, 102);
}

::v-deep.uni-select {
  border: 1px solid rgb(228, 228, 228);
  border-radius: 2px;
}
</style>
